<template>
  <view class="production-container">
    <!-- 生产状态概览 -->
    <view class="status-overview">
      <uni-grid :column="3" :highlight="false">
        <uni-grid-item>
          <view class="grid-item-box">
            <text class="number">12</text>
            <text class="label">生产中</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <text class="number">8</text>
            <text class="label">待生产</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <text class="number">25</text>
            <text class="label">已完成</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <!-- 生产任务列表 -->
    <view class="task-list">
      <view class="section-title">生产任务</view>
      <uni-list>
        <uni-list-item v-for="task in productionTasks" :key="task.id">
          <template v-slot:header>
            <view class="task-header">
              <text class="task-code">{{task.taskCode}}</text>
              <uni-tag :text="task.status" :type="getTagType(task.status)" size="small" />
            </view>
          </template>
          <template v-slot:body>
            <view class="task-info">
              <view class="info-row">
                <text class="label">产品名称：</text>
                <text class="value">{{task.productName}}</text>
              </view>
              <view class="info-row">
                <text class="label">计划数量：</text>
                <text class="value">{{task.planQuantity}}</text>
              </view>
              <view class="info-row">
                <text class="label">完成数量：</text>
                <text class="value">{{task.completedQuantity}}</text>
              </view>
            </view>
          </template>
          <template v-slot:footer>
            <view class="task-footer">
              <text class="date">{{task.planDate}}</text>
              <button size="mini" type="primary" @click="viewDetail(task)">查看详情</button>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productionTasks: [
        {
          id: 1,
          taskCode: 'P20230001',
          status: '生产中',
          productName: '产品A',
          planQuantity: 1000,
          completedQuantity: 600,
          planDate: '2023-06-20'
        },
        {
          id: 2,
          taskCode: 'P20230002',
          status: '待生产',
          productName: '产品B',
          planQuantity: 500,
          completedQuantity: 0,
          planDate: '2023-06-21'
        }
      ]
    }
  },
  methods: {
    getTagType(status) {
      const typeMap = {
        '生产中': 'primary',
        '待生产': 'warning',
        '已完成': 'success'
      }
      return typeMap[status] || 'default'
    },
    viewDetail(task) {
      // TODO: 实现查看详情功能
      uni.navigateTo({
        url: `/pages/production/detail?id=${task.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.production-container {
  padding: 20rpx;

  .status-overview {
    margin-bottom: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx 0;

    .grid-item-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .number {
        font-size: 36rpx;
        font-weight: bold;
        color: #007aff;
      }
      
      .label {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
      }
    }
  }

  .task-list {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .task-header {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .task-code {
        font-size: 28rpx;
        color: #666;
      }
    }

    .task-info {
      .info-row {
        display: flex;
        margin-bottom: 10rpx;
        
        .label {
          font-size: 28rpx;
          color: #666;
          width: 160rpx;
        }
        
        .value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }

    .task-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .date {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style>